<!-- 组织-职位管理-职务管理 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew :title="title" :breadCrumb="breadCrumb"> </PageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        <a-input-search
          :style="{ width: '320px' }"
          placeholder="请输入职位名称"
          search-button
          v-model="nameSearch"
          @search="onSearch"
          @press-enter="onSearch"
        >
          <template #button-icon>
            <icon-search />
          </template>
        </a-input-search>
      </template>
      <template #right>
        <a-button type="primary" @click="goModal(1)">新增职务</a-button>
        <!-- <a-button type="outline">批量新增</a-button> -->
        <a-button type="outline" status="danger" @click="del(null)"
          >批量删除</a-button
        >
      </template>
    </ConditionBox>
    <TableTurn :tableData="getTableData" :args="args" ref="tableRef">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        :width="200"
        dataIndex="name"
        title="职务名称"
      ></a-table-column>
      <a-table-column :width="200" dataIndex="postNum" title="职务编号">
      </a-table-column>
      <a-table-column :width="200" dataIndex="postType" title="职务类别">
        <template #cell="{ record }">
          {{ typeList.find((item: any) => item.id === record.postType)?.name }}
        </template>
      </a-table-column>
      <a-table-column :width="200" dataIndex="postLevel" title="职务级别">
        <template #cell="{ record }">
          {{
            levelList.find((item: any) => item.id === record.postLevel)
              ?.postLevelName
          }}
        </template>
      </a-table-column>
      <a-table-column :width="200" dataIndex="postTime" title="生效时间">
        <template #cell="{ record }">
          {{ dayjs(record.postTime).format('YYYY-MM-DD') }}
        </template>
      </a-table-column>
      <!-- <a-table-column
          :width="200"
          dataIndex="userName"
          title="创建人"
        ></a-table-column> -->
      <a-table-column :width="200" dataIndex="createdAt" title="创建时间">
        <template #cell="{ record }">
          {{ dayjs(record.createdAt).format('YYYY-MM-DD') }}
        </template>
      </a-table-column>
      <a-table-column :width="100" dataIndex="postStatus" title="职务状态">
        <template #cell="{ record }">
          <a-tag
            class="enable"
            :color="
              record.postStatus === 1
                ? `rgb(var(--green-1))`
                : 'rgb(var(--danger-1))'
            "
            :style="{
              color:
                record.postStatus === 1
                  ? `rgb(var(--green-6))`
                  : 'rgb(var(--danger-6))',
              '--enable':
                record.postStatus === 1
                  ? `rgb(var(--green-6))`
                  : 'rgb(var(--danger-6))'
            }"
          >
            {{ record.postStatus === 1 ? '启用' : '停用' }}
          </a-tag>
        </template>
      </a-table-column>
      <!-- <a-table-column
          :width="200"
          dataIndex="postAuthority"
          title="职务权限"
        ></a-table-column>
        <a-table-column
          :width="200"
          dataIndex="postDuty"
          title="职务职责"
        ></a-table-column>
        <a-table-column
          :width="200"
          dataIndex="remark"
          title="描述"
        ></a-table-column> -->
      <a-table-column :width="80" fixed="right">
        <template #title>操作 </template>
        <template #cell="{ record }">
          <a-space :size="0">
            <a-tooltip content="编辑">
              <icon-font
                type="icon-edit"
                :size="26"
                :style="{
                  cursor: 'pointer'
                }"
                @click="goModal(2, record)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="del(record.id)"
              >
                <icon-font
                  type="icon-delete"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm> </a-tooltip
          ></a-space>
        </template>
      </a-table-column>
    </TableTurn>
  </ContentCard>
  <AddJob
    v-model:visible="modalVisible"
    @jobAddEmit="jobAddEmit"
    :type="currType"
    :list="currList"
  >
  </AddJob>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import {
  PostJobList,
  GetJobList,
  PutJobList,
  DelJobList
} from '@/apis/management/organization/positionManagement';
import {
  GetJobLevelList,
  GetJobTypeList
} from '@/apis/management/organization/baseSetting';
import AddJob from './Components/AddJob/index.vue';
import { Message, Modal } from '@arco-design/web-vue';

const title = '职务管理列表';

const breadCrumb: string[] = ['组织', '职位管理', '职务管理'];

const router = useRouter();

let nameSearch = ref(''); //名称搜索框

let tableRef = ref(); // 储存table的ref
let modalVisible = ref(false); // 判断表格方法是否弹出框
/*
 判断弹出哪种弹出框
      1 移动组织
      2 合并
      3 启用
      4 停用
      5 删除
    */
let type = ref(0);

/* 储存选择的数据 */
const selectedList = computed(() => tableRef.value.selectedList);

// 选择器配置
const args = reactive({
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
});

// 获取表格数据
const getTableData = async (pageData?: any) => {
  try {
    const res = await GetJobList({
      ...pageData,
      name: nameSearch.value
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

const typeList = ref<any>([]); // 储存职务类别数据
const levelList = ref<any>([]); // 储存职务级别数据

// 获取职务类别、职务级别数据
const getData = async () => {
  try {
    const res: any = await Promise.all([
      GetJobTypeList({
        pageNumber: 0,
        pageSize: -1
      }),
      GetJobLevelList({
        pageNumber: 0,
        pageSize: -1
      })
    ]);
    typeList.value = res[0].content;
    levelList.value = res[1].content;
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

// 搜索框
const onSearch = () => {
  tableRef.value.loadData({
    pageNumber: 0,
    pageSize: -1
  });
};

// 监听键盘回车，按了回车也会查询
const keyDown = (e: any) => {
  if (e.keyCode === 13) {
    tableRef.value.loadData({
      pageNumber: 0,
      pageSize: -1
    });
  }
};

onMounted(() => {
  // 监听键盘事件
  window.addEventListener('keydown', keyDown);
});

let currType = ref(0); // 判断是新增、编辑还是详情
let currList = ref<any>({}); // 储存某一行数据
// 新增,详情、编辑工作地点按钮
const goModal = (type: number, record?: any) => {
  if (record) currList.value = record;
  else currList.value = {};
  currType.value = type;
  modalVisible.value = true;
};

// 职务弹出框新增编辑返回的自定义事件
const jobAddEmit = async (formData: any) => {
  try {
    // 编辑
    if (formData.id) await PutJobList(formData);
    // 新增
    else {
      delete formData.postNum;
      await PostJobList(formData);
    }
    tableRef.value.loadData();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 删除
const del = async (id: number | null) => {
  try {
    if (!id) {
      if (selectedList.value.length === 0) {
        Message.error('请至少选择一项！');
      } else {
        Modal.confirm({
          title: '提示',
          content: '确定要删除选中的数据吗？',
          onOk: async () => {
            try {
              const res = await DelJobList({
                ids: selectedList.value
              });
              if (res.code === 400) {
                Message.error(res.msg);
              }
              tableRef.value.selectedList = [];
              tableRef.value.loadData();
            } catch (error: unknown) {
              console.log(error);
            }
          }
        });
      }
    } else {
      const res = await DelJobList({
        ids: [id]
      });
      if (res.code === 400) {
        Message.error(res.msg);
      }
      tableRef.value.selectedList = [];
      tableRef.value.loadData();
    }
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>

<style lang="less" scoped>
.container {
  padding: 10px 20px;
  .header {
    display: flex;
    justify-content: space-between;
    &-front {
      position: relative;
      line-height: 30px;
    }
  }
  .main {
    margin-top: 20px;
  }
}
.enable::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: relative;
  right: 3px;
  background-color: var(--enable);
}
</style>
